<template>
  <el-dialog
    :title="id ? $t('common.modify') : $t('common.create')"
    :visible.sync="dialogVisible"
    :show="show"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    :before-close="handleClose"
    width="500px"
    @open="open"
  >
    <el-form
      ref="form"
      v-loading="infoLoading"
      :model="info"
      :rules="rules"
      label-width="80px"
    >
      <el-scrollbar
        ref="myScrollbar"
        :wrap-class="{ wrapClass: true }"
        class="form-scrollbar"
      >
        <div class="el-dialog-div">
          <el-form-item :label="$t('common.name')" prop="name">
            <el-input v-model="info.name"></el-input>
          </el-form-item>
          <el-form-item :label="$t('common.remark')">
            <el-input
              type="textarea"
              :rows="2"
              :placeholder="$t('common.remark')"
              v-model="info.remark"
            >
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('common.status')">
            <el-radio-group v-model="info.state">
              <el-radio :label="1">{{ $t('common.enable') }}</el-radio>
              <el-radio :label="2">{{ $t('common.disabled') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-scrollbar>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-row>
        <el-col :span="12" class="btnEdit">
          <el-button :disabled="infoLoading" type="primary" @click="subInfo">{{
            $t('permission.confirm')
          }}</el-button>
        </el-col>
        <el-col :span="12" class="btnEdit">
          <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<style scoped>
/deep/ .el-dialog__body {
  padding: 0;
}

.form-scrollbar {
  height: 220px;
}

.el-dialog-div {
  padding: 20px 20px 0 20px;
  min-width: 400px;
}
</style>

<script>
import { postAction } from '@/api/common'

export default {
  name: 'edit',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: '',
    },
  },
  data() {
    return {
      dialogVisible: this.show,
      isChange: false,
      initForm: true,
      // 页面元素
      info: {
        name: '',
        remark: '',
        state: 1,
      },
      infoLoading: true,

      // 验证
      rules: {
        name: [
          {
            required: true,
            message: this.$t('common.enter', [this.$t('common.name')]),
            trigger: 'change',
          },
        ],
      },
    }
  },
  watch: {
    show() {
      this.dialogVisible = this.show
      this.initForm = true
    },
    info: {
      handler: function () {
        if (this.initForm) {
          this.isChange = false
          this.initForm = false
        } else {
          this.isChange = true
        }
      },
      deep: true,
    },
  },

  methods: {
    async open() {
      this.infoLoading = true
      // 页面重置
      this.$nextTick(() => {
        this.$refs['myScrollbar'].wrap.scrollTop = 0
        this.$refs['form'].clearValidate()
      })
      if (this.id != '') {
        const { data } = await postAction(
          { id: this.id },
          'ruleTemplate/GetInfo'
        )
        this.info = data
        console.log(this.info)
      } else {
        this.info = {
          name: '',
          remark: '',
          state: 1,
        }
      }
      this.infoLoading = false
    },
    subInfo() {
      this.$refs.form.validate(async (valid) => {
        // form验证
        if (valid) {
          this.infoLoading = true

          // eslint-disable-next-line eqeqeq
          if (this.id == '') {
            await postAction(this.info, 'ruleTemplate/SubAddInfo')
          } else {
            await postAction(this.info, 'ruleTemplate/SubEditInfo')
          }

          this.infoLoading = false
          // 调用父级页面方法
          this.closeAction()
          this.$notify({
            title: this.$t('common.success'),
            message: this.$t('common.operationSuccess'),
            type: 'success',
            duration: 2000,
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose(done) {
      if (this.isChange) {
        this.$confirm(
          this.$t('common.unsavedChangesTip'),
          this.$t('common.tips'),
          {
            type: 'warning',
          }
        )
          .then((_) => {
            this.$emit('update:show', false)
          })
          // eslint-disable-next-line @typescript-eslint/no-empty-function
          .catch((_) => {})
      } else {
        this.$emit('update:show', false)
      }
    },
    closeAction() {
      this.$emit('closeAction')
    },
  },
}
</script>
